<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>注册</title>
  <link rel="stylesheet" href="style.css">
  <style>
    body { background: #181818; color: #00ff00; font-family: monospace; }
  .container { max-width: 420px; margin: 24px auto; background: #222; padding: 20px; border-radius: 8px; box-shadow: 0 0 16px #00ff0033; }
    h1 { color: #00ff00; text-align: center; }
    input { width: 100%; background: #181818; color: #00ff00; border: 1px solid #00ff00; padding: 8px; margin-bottom: 12px; font-size: 14px; border-radius: 4px; }
    button { background: #00ff00; color: #181818; border: none; padding: 8px 16px; font-weight: bold; cursor: pointer; border-radius: 4px; width: 100%; }
    button:hover { background: #00cc00; }
    a { color: #00ff00; text-decoration: underline; }
    .info { text-align: center; margin-top: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div id="errorBanner" style="display:none;background:#330; color:#ff6666;padding:8px;border-radius:4px;margin-bottom:8px;font-weight:bold;text-align:center;font-family:monospace;">错误</div>
    <h1>&lt;注册/&gt;</h1>
    <form action="/register" method="POST">
      <input type="text" name="username" placeholder="用户名" required autocomplete="off">
      <input type="password" name="password" placeholder="密码" required autocomplete="off">
      <button type="submit">注册</button>
    </form>
    <div class="info">已有账号？<a href="/login">登录</a></div>
  </div>
  <script>
    const params = new URLSearchParams(window.location.search);
    const err = params.get('error');
    if (err) {
      const el = document.getElementById('errorBanner');
      if (err === 'exists') el.textContent = '< 注册失败：用户名已存在 >';
      else el.textContent = '< 错误 >';
      el.style.display = 'block';
    }
  </script>
</body>
</html>
